<template>
    <el-dialog :title="$i18n.t(editFlag? 'label.editWorkflow':'label.addWorkflow')"
               :visible="dialogVisible"
               :close-on-click-modal="false"
               width="600px"
               @open="onOpen"
               @close="onClose"
               @closed="resetData">
        <div class="workflow-info-form" v-base-loading="loadingState">
            
            <el-form ref="form" :model="localWorkflowData" :rules="rules">
                <el-form-item :label="$i18n.t('label.workflowName')" prop="name">
                    <el-input v-model="localWorkflowData.name"
                              autocomplete="off"
                              :maxlength="50"
                              :placeholder="$i18n.t('label.workflowNameTip')"></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('label.workflowCode')" prop="id">
                    <el-input v-model="localWorkflowData.id"
                              :disabled="editFlag"
                              autocomplete="off"
                              :maxlength="32"
                              :placeholder="$i18n.t('label.workflowCode')"></el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('label.formId')" prop="formId">
                    <el-select v-model="localWorkflowData.formId" :placeholder="$i18n.t('label.formIdTip')">
                        <el-option
                            v-for="item in itemList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$i18n.t('label.comment')" prop="documentation">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 6, maxRows: 6}"
                        :placeholder="$i18n.t('label.commentTip')"
                        :maxlength="300"
                        show-word-limit
                        v-model="localWorkflowData.documentation">
                    </el-input>
                </el-form-item>
                <el-form-item :label="$i18n.t('label.noticeWay')">
                    <el-checkbox v-model="localWorkflowData.siteNotice" :label=" $i18n.t('label.siteNotice')"/>
                    <el-checkbox v-model="localWorkflowData.emailNotice" :label=" $i18n.t('label.emailNotice')"/>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onClose">{{ $i18n.t('button.cancel') }}</el-button>
            <el-button type="primary" @click="onSave">{{ $i18n.t('button.sure') }}</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import {Component, Emit, Prop} from 'vue-property-decorator';
import WorkflowModel from "../model/workflow.model";
import Utils from "@/utils/utils";
import _ from 'lodash';
import {ElForm} from "element-ui/types/form";
import ResponseModel from "@/common/model/response.model";
import WorkflowService from "@/components-com/workflow/service/workflow.service";
import {MessageTypeEnum, ResponseStatusEnum} from "@/common/enum/common.enum";
import {NodeTypeEnum} from "@/components-com/workflow/enums/node.enum";
import TreeUtil from "@/components-com/workflow/util/tree-util";
import BaseVue from "@/common/base-vue.vue";
import WorkflowDataModel from "@/components-com/workflow/model/workflow-data.model";
import {CREATE_SAVE_EVENT} from "@/components-com/workflow/const/workflow.const";

@Component({components: {}})
export default class WorkflowInfo extends BaseVue {
    
    /*工作流信息*/
    @Prop()
    public workflowData: WorkflowModel;
    
    /*弹框状态*/
    @Prop()
    public dialogVisible: boolean;
    
    /**是否编辑*/
    @Prop()
    public editFlag: boolean;
    /*组件内部数据*/
    private localWorkflowData: WorkflowModel = new WorkflowModel(Utils.uuid());
    /*基础表单参数*/
    private itemList = [{tid: '1', label: '资产管理单据', value: '123'}, {tid: '1', label: '物资调拨单据', value: '321'}];
    $refs: {
        form: ElForm
    }
    /*表单校验规则*/
    private rules = {
        name: [{required: true, message: this.$i18n.t('label.workflowNameTip'), trigger: 'blur'}],
        id: [{required: true, message: this.$i18n.t('label.workflowCodeValidationTip'), trigger: 'blur'}],
        formId: [{required: true, message: this.$i18n.t('label.formIdTip'), trigger: 'blur'}]
    };
    
    private loadingState = false;
    
    /**
     * 打开时初始化数据
     */
    private onOpen() {
        if (!_.isEmpty(this.workflowData)) {
            this.localWorkflowData = _.cloneDeep(this.workflowData)
        }
    }
    
    @Emit()
    private onClose() {
    }
    
    /**
     * 保存
     */
    private onSave() {
        this.$refs.form.validate((validityState: boolean) => {
            if (validityState) {
                this.loadingState = true;
                if (this.editFlag) {
                    const instanceModel = new WorkflowDataModel();
                    Object.assign(instanceModel, this.localWorkflowData, {
                        id: this.localWorkflowData.key,
                        key: this.localWorkflowData.id,
                        description: this.localWorkflowData.documentation
                    });
                    WorkflowService.updateWorkflow(instanceModel).then((res: ResponseModel) => {
                        if (res.status === ResponseStatusEnum.success) {
                            this.baseMessage('tips.saveSuccess', MessageTypeEnum.success);
                            this.$emit(CREATE_SAVE_EVENT, _.cloneDeep(this.localWorkflowData));
                        }
                    }).finally(() => {
                        this.loadingState = false;
                    });
                } else {
                    this.initNodeData();
                    WorkflowService.saveWorkflow(this.localWorkflowData).then((res: ResponseModel<WorkflowDataModel>) => {
                        if (res.status === ResponseStatusEnum.success) {
                            this.baseMessage('tips.creationSuccess', MessageTypeEnum.success);
                            this.$emit(CREATE_SAVE_EVENT, _.cloneDeep(res.data));
                        }
                    }).finally(() => {
                        this.loadingState = false;
                    });
                }
                
            }
        })
    }
    
    /**
     * 还原数据
     * @private
     */
    private resetData() {
        this.localWorkflowData = new WorkflowModel('');
    }
    
    /**
     * 初始化节点信息 否则后端无法保存
     * @private
     */
    private initNodeData() {
        // 只有新增才会初始化一个开始节点
        const nodeInfo = {
            approved: "",
            name: 'label.startWithOrg',
            title: 'label.startWith',
            type: NodeTypeEnum.start,
            nodeId: TreeUtil.getTreeId()
        };
        TreeUtil.dataTransfer(nodeInfo, this.localWorkflowData);
    }
    
}
</script>
<style lang="scss" scoped>
.workflow-info-form {
    width: 400px;
    margin: 0 auto;
}
</style>
    

